<template>
  <div class="app">
    <div class="app-btn">
      <button @click="$router.push('/basic-use')">基本使用</button>
      <button @click="$router.push('/router-view-slot')">RouterView插槽</button>
      <button @click="$router.push('/router-view-extend')">RouterLink扩展</button>
    </div>

    <RouterView/>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'App'
});
</script>

<style scoped>
.app {
  display: flex;
  column-gap: 20px;
}

.app-btn {
  display: flex;
  flex-flow: column;
  row-gap: 10px;

  & > button {
    width: 120px;
  }
}
</style>